<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>患者病历处理</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">

    <!-- Tailwind 配置 -->
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#165DFF',
                        secondary: '#0FC6C2',
                        neutral: '#F5F7FA',
                        'neutral-dark': '#4E5969',
                        success: '#00B42A',
                        warning: '#FF7D00',
                        danger: '#F53F3F'
                    },
                    fontFamily: {
                        inter: ['Inter', 'system-ui', 'sans-serif'],
                    },
                },
            }
        }
    </script>

    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .card-shadow {
                box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
            }
            .form-focus {
                @apply focus:ring-2 focus:ring-primary/30 focus:border-primary transition duration-200;
            }
        }
    </style>
</head>
<body class="bg-gray-50 font-inter text-gray-800 min-h-screen">
<main class="container mx-auto px-4 py-6">
    <!-- 提示消息区域 - 位于页面顶部 -->
    <div class="mb-6" th:unless="${#strings.isEmpty(message)}">
        <div class="ui success message bg-success/10 border-l-4 border-success message-shadow rounded-b-lg">
            <div class="flex items-start justify-between w-full">
                <div class="pl-4 pr-2">
                    <i class="fa fa-check-circle text-success text-xl mr-2"></i>
                    <div class="header font-medium text-gray-800">提示：</div>
                    <p th:text="${message}" class="text-gray-700 mt-1"></p>
                </div>
                <button type="button" class="close icon text-gray-400 hover:text-gray-600 mr-2">
                    <i class="fa fa-times"></i>
                </button>
            </div>
        </div>
    </div>
    <!-- 页面标题 -->
    <div class="mb-6">
        <h2 class="text-[clamp(1.5rem,3vw,2rem)] font-bold text-gray-800">患者病历处理</h2>
        <p class="text-gray-500 mt-1">填写患者诊断信息和治疗方案</p>
    </div>

    <!-- 表单卡片 -->
    <div class="bg-white rounded-xl p-6 mb-6 card-shadow">
        <form id="medicalRecordForm" method="post" th:action="@{/Doctor/addMedicalRecord}">
            <!-- 隐藏字段 -->
            <input type="hidden" id="patient_id" name="patient_id" th:value="${patient?.id}">
            <input type="hidden" id="registration_id" name="registration_id" th:value="${registration?.id}">

            <!-- 患者基本信息 -->
            <div class="mb-8">
                <h3 class="text-lg font-semibold mb-4 flex items-center">
                    <i class="fa fa-user-md text-primary mr-2"></i>患者基本信息
                </h3>

                <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
                    <div class="space-y-2">
                        <label for="patient_name" class="block text-sm font-medium text-gray-700">患者姓名</label>
                        <input type="text" id="patient_name" name="patient_name"
                               th:value="${patient?.name}"
                               class="w-full px-4 py-2 rounded-lg border border-gray-300 form-focus bg-gray-100 text-gray-700"
                               readonly>
                    </div>

                    <div class="space-y-2">
                        <label for="age" class="block text-sm font-medium text-gray-700">年龄</label>
                        <input type="number" id="age" name="age"
                               th:value="${patient?.age}"
                               class="w-full px-4 py-2 rounded-lg border border-gray-300 form-focus bg-gray-100 text-gray-700"
                               readonly>
                    </div>

                    <div class="space-y-2">
                        <label for="gender" class="block text-sm font-medium text-gray-700">性别</label>
                        <input type="text" id="gender" name="gender"
                               th:value="${patient?.gender == '男' ? '男' : (patient?.gender == '女' ? '女' : '其他')}"
                               class="w-full px-4 py-2 rounded-lg border border-gray-300 form-focus bg-gray-100 text-gray-700"
                               readonly>
                    </div>

                    <div class="space-y-2">
                        <label for="phone" class="block text-sm font-medium text-gray-700">联系电话</label>
                        <input type="tel" id="phone" name="phone"
                               th:value="${patient?.phone}"
                               class="w-full px-4 py-2 rounded-lg border border-gray-300 form-focus bg-gray-100 text-gray-700"
                               readonly>
                    </div>

                    <div class="space-y-2">
                        <label for="id_card" class="block text-sm font-medium text-gray-700">身份证号</label>
                        <input type="text" id="id_card" name="id_card"
                               th:value="${patient?.id_card}"
                               class="w-full px-4 py-2 rounded-lg border border-gray-300 form-focus bg-gray-100 text-gray-700"
                               readonly>
                    </div>


                    <div class="space-y-2">
                        <label for="address" class="block text-sm font-medium text-gray-700">地址</label>
                        <input type="text" id="address" name="address"
                               th:value="${patient?.address}"
                               class="w-full px-4 py-2 rounded-lg border border-gray-300 form-focus bg-gray-100 text-gray-700"
                               readonly>
                    </div>
                </div>

            </div>

            <!-- 症状描述 -->
            <div class="mb-8">
                <h3 class="text-lg font-semibold mb-4 flex items-center">
                    <i class="fa fa-stethoscope text-primary mr-2"></i>症状描述
                </h3>

                <div class="space-y-2">
                    <label for="symptoms" class="block text-sm font-medium text-gray-700">主诉</label>
                    <textarea id="symptoms" name="symptoms" rows="3"
                              class="w-full px-4 py-2 rounded-lg border border-gray-300 form-focus bg-gray-100 text-gray-700"
                              readonly
                              th:text="${registration?.symptoms}">默认内容</textarea>
                </div>

                <div class="mt-4 space-y-2">
                    <label for="nurse_remark" class="block text-sm font-medium text-gray-700">护士备注</label>
                    <textarea id="nurse_remark" name="nurse_remark" rows="2"
                              class="w-full px-4 py-2 rounded-lg border border-gray-300 form-focus"
                              readonly
                              th:text="${registration?.remark} ?: '暂无备注'">该患者精神状态良好，生命体征平稳。</textarea>

                </div>

            </div>

            <!-- 诊断结果 -->
            <div class="mb-8">
                <h3 class="text-lg font-semibold mb-4 flex items-center">
                    <i class="fa fa-file-text-o text-primary mr-2"></i>诊断结果
                </h3>

                <div class="space-y-2">
                    <label for="diagnosis" class="block text-sm font-medium text-gray-700">
                        诊断结论 <span class="text-red-500">*</span>
                    </label>
                    <textarea id="diagnosis" name="diagnosis" rows="4" required
                              class="w-full px-4 py-2 rounded-lg border border-gray-300 form-focus"
                              placeholder="请输入详细的诊断结果..."></textarea>
                </div>

            </div>

<!--            &lt;!&ndash; 治疗方案 &ndash;&gt;-->
<!--            <div class="mb-8">-->
<!--                <h3 class="text-lg font-semibold mb-4 flex items-center">-->
<!--                    <i class="fa fa-medkit text-primary mr-2"></i>治疗方案-->
<!--                </h3>-->

<!--                <div class="space-y-2">-->
<!--                    <label for="treatment_plan" class="block text-sm font-medium text-gray-700">-->
<!--                        治疗方案 <span class="text-red-500">*</span>-->
<!--                    </label>-->
<!--                    <textarea id="treatment_plan" name="treatment_plan" rows="6" required-->
<!--                              class="w-full px-4 py-2 rounded-lg border border-gray-300 form-focus"-->
<!--                              placeholder="请输入详细的治疗方案，包括用药、剂量、疗程等..."></textarea>-->
<!--                </div>-->

<!--                <div class="mt-6">-->
<!--                    <h4 class="font-medium mb-3">开具药品</h4>-->
<!--                    <div id="medicationItems" class="space-y-4">-->
<!--                        <div class="medication-item bg-gray-50 p-4 rounded-lg border border-gray-200">-->
<!--                            <div class="grid grid-cols-1 md:grid-cols-4 gap-4">-->
<!--                                <div class="space-y-2">-->
<!--                                    <label class="block text-sm font-medium text-gray-700">药品名称</label>-->
<!--                                    <input type="text" name="medications[${index}].name"-->
<!--                                           class="w-full px-4 py-2 rounded-lg border border-gray-300 form-focus"-->
<!--                                           placeholder="例如：阿莫西林胶囊">-->
<!--                                </div>-->
<!--                                <div class="space-y-2">-->
<!--                                    <label class="block text-sm font-medium text-gray-700">规格</label>-->
<!--                                    <input type="text" name="medications[${index}].specification"-->
<!--                                           class="w-full px-4 py-2 rounded-lg border border-gray-300 form-focus"-->
<!--                                           placeholder="例如：0.25g*24粒">-->
<!--                                </div>-->
<!--                                <div class="space-y-2">-->
<!--                                    <label class="block text-sm font-medium text-gray-700">用法用量</label>-->
<!--                                    <input type="text" name="medications[${index}].dosage"-->
<!--                                           class="w-full px-4 py-2 rounded-lg border border-gray-300 form-focus"-->
<!--                                           placeholder="例如：口服，一次0.5g，一日3次">-->
<!--                                </div>-->
<!--                                <div class="space-y-2">-->
<!--                                    <label class="block text-sm font-medium text-gray-700">疗程</label>-->
<!--                                    <input type="text" name="medications[${index}].duration"-->
<!--                                           class="w-full px-4 py-2 rounded-lg border border-gray-300 form-focus"-->
<!--                                           placeholder="例如：7天">-->
<!--                                </div>-->
<!--                            </div>-->
<!--                        </div>-->

<!--                    </div>-->

<!--                    <button type="button" id="addMedication" class="mt-3 flex items-center text-primary hover:text-primary/80 transition-colors">-->
<!--                        <i class="fa fa-plus-circle mr-1"></i> 添加药品-->
<!--                    </button>-->
<!--                </div>-->

<!--                <div class="mt-6">-->
<!--                    <h4 class="font-medium mb-3">检查/检验项目</h4>-->
<!--                    <div id="examinationItems" class="space-y-4">-->
<!--                        <div class="examination-item bg-gray-50 p-4 rounded-lg border border-gray-200">-->
<!--                            <div class="grid grid-cols-1 md:grid-cols-3 gap-4">-->
<!--                                <div class="space-y-2">-->
<!--                                    <label class="block text-sm font-medium text-gray-700">项目名称</label>-->
<!--                                    <input type="text" class="w-full px-4 py-2 rounded-lg border border-gray-300 form-focus"-->
<!--                                           placeholder="例如：胸部X光">-->
<!--                                </div>-->
<!--                                <div class="space-y-2">-->
<!--                                    <label class="block text-sm font-medium text-gray-700">检查科室</label>-->
<!--                                    <select class="w-full px-4 py-2 rounded-lg border border-gray-300 form-focus">-->
<!--                                        <option value="">请选择科室</option>-->
<!--                                        <option value="放射科">放射科</option>-->
<!--                                        <option value="检验科">检验科</option>-->
<!--                                        <option value="超声科">超声科</option>-->
<!--                                        <option value="心电图室">心电图室</option>-->
<!--                                    </select>-->
<!--                                </div>-->
<!--                                <div class="space-y-2">-->
<!--                                    <label class="block text-sm font-medium text-gray-700">备注</label>-->
<!--                                    <input type="text" class="w-full px-4 py-2 rounded-lg border border-gray-300 form-focus"-->
<!--                                           placeholder="例如：胸部正位片">-->
<!--                                </div>-->
<!--                            </div>-->
<!--                        </div>-->
<!--                    </div>-->

<!--                    <button type="button" id="addExamination" class="mt-3 flex items-center text-primary hover:text-primary/80 transition-colors">-->
<!--                        <i class="fa fa-plus-circle mr-1"></i> 添加检查项目-->
<!--                    </button>-->
<!--                </div>-->
<!--            </div>-->

            <!-- 医嘱 -->
            <div class="mb-8">
                <h3 class="text-lg font-semibold mb-4 flex items-center">
                    <i class="fa fa-sticky-note-o text-primary mr-2"></i>医嘱
                </h3>

                <div class="space-y-2">
                    <label for="advice" class="block text-sm font-medium text-gray-700">
                        医嘱内容
                    </label>
                    <textarea id="advice" name="treatment_plan" rows="3"
                              class="w-full px-4 py-2 rounded-lg border border-gray-300 form-focus"
                              placeholder="请输入医嘱内容，如饮食、休息、复诊建议等..."></textarea>
                </div>

                <div class="mt-4 space-y-2">
                    <label for="next_visit_date" class="block text-sm font-medium text-gray-700">
                        下次复诊日期
                    </label>
                    <input type="date" id="next_visit_date" name="next_visit_date"
                           class="w-full px-4 py-2 rounded-lg border border-gray-300 form-focus">
                </div>
            </div>

            <!-- 提交按钮 -->
            <div class="flex flex-col sm:flex-row justify-end space-y-3 sm:space-y-0 sm:space-x-4 pt-4 border-t border-gray-200">
                <button type="submit" class="px-6 py-2.5 bg-primary text-white font-medium rounded-lg hover:bg-primary/90 transition-colors shadow-md hover:shadow-lg">
                    <i class="fa fa-save mr-1"></i> 提交病历
                </button>
            </div>
        </form>
    </div>
</main>
<!--<script>-->
<!--    // 页面加载完成后执行-->
<!--    document.addEventListener('DOMContentLoaded', function() {-->
<!--        let medicationIndex = 0;-->

<!--        document.getElementById('addMedication').addEventListener('click', function () {-->
<!--            const container = document.getElementById('medicationItems');-->
<!--            const newItem = document.createElement('div');-->
<!--            newItem.className = 'medication-item bg-gray-50 p-4 rounded-lg border border-gray-200';-->
<!--            newItem.innerHTML = `-->
<!--            <div class="grid grid-cols-1 md:grid-cols-4 gap-4">-->
<!--                <div class="space-y-2">-->
<!--                    <label class="block text-sm font-medium text-gray-700">药品名称</label>-->
<!--                    <input type="text" name="medications[${medicationIndex}].name"-->
<!--                           class="w-full px-4 py-2 rounded-lg border border-gray-300 form-focus"-->
<!--                           placeholder="例如：阿莫西林胶囊">-->
<!--                </div>-->
<!--                <div class="space-y-2">-->
<!--                    <label class="block text-sm font-medium text-gray-700">规格</label>-->
<!--                    <input type="text" name="medications[${medicationIndex}].specification"-->
<!--                           class="w-full px-4 py-2 rounded-lg border border-gray-300 form-focus"-->
<!--                           placeholder="例如：0.25g*24粒">-->
<!--                </div>-->
<!--                <div class="space-y-2">-->
<!--                    <label class="block text-sm font-medium text-gray-700">用法用量</label>-->
<!--                    <input type="text" name="medications[${medicationIndex}].dosage"-->
<!--                           class="w-full px-4 py-2 rounded-lg border border-gray-300 form-focus"-->
<!--                           placeholder="例如：口服，一次0.5g，一日3次">-->
<!--                </div>-->
<!--                <div class="space-y-2">-->
<!--                    <label class="block text-sm font-medium text-gray-700">疗程</label>-->
<!--                    <input type="text" name="medications[${medicationIndex}].duration"-->
<!--                           class="w-full px-4 py-2 rounded-lg border border-gray-300 form-focus"-->
<!--                           placeholder="例如：7天">-->
<!--                </div>-->
<!--            </div>-->
<!--            <div class="mt-3 text-right">-->
<!--                <button type="button" class="remove-medication text-red-500 hover:text-red-700 transition-colors">-->
<!--                    <i class="fa fa-trash-o mr-1"></i> 删除-->
<!--                </button>-->
<!--            </div>-->
<!--        `;-->
<!--            container.appendChild(newItem);-->
<!--            medicationIndex++;-->

<!--            // 删除按钮事件-->
<!--            newItem.querySelector('.remove-medication').addEventListener('click', function () {-->
<!--                container.removeChild(newItem);-->
<!--                medicationIndex&#45;&#45;;-->
<!--            });-->
<!--        });-->


<!--        // 添加检查项目按钮事件-->
<!--        document.getElementById('addExamination').addEventListener('click', function() {-->
<!--            const container = document.getElementById('examinationItems');-->
<!--            const newItem = document.createElement('div');-->
<!--            newItem.className = 'examination-item bg-gray-50 p-4 rounded-lg border border-gray-200';-->
<!--            newItem.innerHTML = `-->
<!--          <div class="grid grid-cols-1 md:grid-cols-3 gap-4">-->
<!--            <div class="space-y-2">-->
<!--              <label class="block text-sm font-medium text-gray-700">项目名称</label>-->
<!--              <input type="text" class="w-full px-4 py-2 rounded-lg border border-gray-300 form-focus"-->
<!--                placeholder="例如：胸部X光">-->
<!--            </div>-->
<!--            <div class="space-y-2">-->
<!--              <label class="block text-sm font-medium text-gray-700">检查科室</label>-->
<!--              <select class="w-full px-4 py-2 rounded-lg border border-gray-300 form-focus">-->
<!--                <option value="">请选择科室</option>-->
<!--                <option value="放射科">放射科</option>-->
<!--                <option value="检验科">检验科</option>-->
<!--                <option value="超声科">超声科</option>-->
<!--                <option value="心电图室">心电图室</option>-->
<!--              </select>-->
<!--            </div>-->
<!--            <div class="space-y-2">-->
<!--              <label class="block text-sm font-medium text-gray-700">备注</label>-->
<!--              <input type="text" class="w-full px-4 py-2 rounded-lg border border-gray-300 form-focus"-->
<!--                placeholder="例如：胸部正位片">-->
<!--            </div>-->
<!--          </div>-->
<!--          <div class="mt-3 text-right">-->
<!--            <button type="button" class="remove-examination text-red-500 hover:text-red-700 transition-colors">-->
<!--              <i class="fa fa-trash-o mr-1"></i> 删除-->
<!--            </button>-->
<!--          </div>-->
<!--        `;-->
<!--            container.appendChild(newItem);-->

<!--            // 添加删除事件-->
<!--            newItem.querySelector('.remove-examination').addEventListener('click', function() {-->
<!--                container.removeChild(newItem);-->
<!--            });-->
<!--        });-->
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
<script src="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.js"></script>
<script>
    $(".message .close").on('click', function () {
        $(this).closest(".message").transition("fade");
    })
</script>
</body>
</html>
